/**
 * 商品信息录入
 */
import React, { Component } from 'react'
import './FormInfo.scss';
//引入图片库
import imagesStore from '../../assets/lib/imagesStore'


export default class FormInfo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tableInfo:{},
            //修改状态
            goodsId:false
        };
    }
    //获取表单元素值
    changeValue = (e) => {
        //这里是给state 存值，左边是key，右边是值
        this.setState({
            [e.target.name]: e.target.value,
            add: true,
        });
    };

    //生命周期
    componentDidMount() { 
        console.log(this.props.location.state) 
         // 判断是否是通过点击“修改”进入该页面的
        if (this.props.location.state) {
            const infor=document.getElementsByClassName("infor")
            infor[0].value=this.props.location.state.goodsId.brand
            infor[1].value=this.props.location.state.goodsId.goodsName
            infor[2].value=this.props.location.state.goodsId.model
            infor[3].value=this.props.location.state.goodsId.category
            infor[4].value=this.props.location.state.goodsId.intoDatetime.replace(' ','T')
            infor[5].value=this.props.location.state.goodsId.quantity
            infor[6].value=this.props.location.state.goodsId.price
            this.setState({
                goodsId:true
                })
            }
        }

/**
     *点击确认提交按钮
     *提交表单信息追加到new URLSearchParams()  函数中
    发送参数的实例：new URLSearchParams() 是后台提供的
     * @params FormInfo
     */
    addUserInfo = (e) => {
        e.preventDefault();
            // 各表单元素还没有输入值的时候弹出显示
            if (
                this.state.brand === undefined &&
                this.state.goodsName === undefined &&
                this.state.model === undefined &&
                this.state.category === undefined &&
                this.state.intoDatetime === undefined &&
                this.state.quantity === undefined &&
                this.state.price === undefined
            ) {
                alert("请输入正确信息！");
                return;
            }
        // 判断品牌输入
        if (this.state.brand !== undefined && this.state.brand.trim() === "") 
        {
            alert("门派的输入不能为空！");
            return;
        }

        // 判断秘籍输入
        else if (this.state.goodsName !== undefined && this.state.goodsName.trim() === "") 
        {
            alert("秘籍的输入不能为空！");
            return;
        }

        // 判断型号输入
        else if (this.state.model !== undefined && this.state.model.trim() === "") 
        {
            alert("型号的输入不能为空！");
            return;
        }

        // 判断类型输入
        else if (this.state.category !== undefined && this.state.category.trim() === "") 
        {
            alert("类型的输入不能为空！");
            return;
        }

        //判断数量输入
        else if (this.state.quantity !== undefined && this.state.quantity.trim() === "") 
        {
            alert("数量的输入不能为空！");
            return;
        }

        //判断价格输入
        else if (this.state.price !== undefined && this.state.price.trim() === "") 
        {
            alert("价格的输入不能为空！");
            return;
        }

    

        // new URLSearchParams()返回的   是一  个  对象
        //则 params 是一个对象类型
        const params = new URLSearchParams();
        //设计一个判定条件
        if (this.state.add) {
            //把表单各个元素添加到 这个对象中 发送给后台进行操作
            params.append("brand", this.state.brand);
            params.append("goodsName", this.state.goodsName);
            params.append("model", this.state.model);
            params.append("category", this.state.category);
            params.append("intoDatetime", this.state.intoDatetime);
            params.append("quantity", this.state.quantity);
            params.append("price", this.state.price);
            //请求商品添加接口
            React.axios
                .post(
                    `/store-manage/gw1901/goods-manage-g4//goods-add.php`,
                    params
                )
                .then((res) => {
                    alert(res.data);
                });
        } else {
            alert("您所添加商品信息不完整！请修改后在添加！");
        }
    };


    //点击修改按钮
    modifyUserInfo = () => {
        const infor=document.getElementsByClassName("infor")
        // 将表单数据转换为查询参数格式、
        const params = new URLSearchParams();
        params.append("goodsID",this.props.location.state.goodsId.goodsID);
        // 商品品牌
        params.append("brand",infor[0].value);
        // 商品名称
        params.append("goodsName",infor[1].value);
        // 商品型号
        params.append("model",infor[2].value);
        // 商品分类
        params.append("category",infor[3].value);
        // 商品入库时间
        params.append("intoDatetime",infor[4].value);
        // 商品入库数量
        params.append("quantity",infor[5].value);
        // 商品单价
        params.append("price",infor[6].value);
        // 请求注册接口
        React.axios.post(`/store-manage/gw1901/goods-manage-g4/goods-update.php`,params).then(res=>{
            alert(res.data)
        })
    }
        
    //重置表单数据
    resetForm = () => {
            if(window.confirm("确定要重新输入商品信息吗？")) {
                //清空表单
                document.getElementById("brand").value="";
                document.getElementById("goodsName").value="";
                document.getElementById("model").value="";
                document.getElementById("category").value="undefined";
                document.getElementById("intoDatetime").value="";
                document.getElementById("quantity").value="";
                document.getElementById("price").value="";
            }else {
                return;
            }
    };

    //渲染界面
    render() {
        return (
            <div className="container">

                 {/* 内容标题 */}
                <div className="title1">
                        <img 
                            src={imagesStore.img1} 
                            alt="图片加载中" 
                        />
                        <div className="title-text">
                            <h2>武功秘籍录入</h2>
                        </div>
                </div>
                
                 {/* 信息表格 */}
                <div className="formContent">
                    <form>
                        <div>
                            <label >门派：</label>
                            <input 
                            name="brand"
                            type="text"
                            id="brand"
                            className="form-control infor"
                            onChange={this.changeValue}
                            placeholder="请输入修仙门派"
                            />
                        </div>
                        
                        <div>
                            <label >秘籍：</label>
                            <input 
                            name="goodsName"
                            type="text" 
                            id="goodsName"
                            className="form-control infor"
                            onChange={this.changeValue}
                            placeholder="请输入秘籍名称"
                            />
                        </div>

                        <div>
                            <label >型号：</label>
                            <input 
                            name="model"
                            type="text" 
                            id="model"
                            className="form-control infor"
                            onChange={this.changeValue}
                            placeholder="请输入秘籍类型"
                            />
                        </div>

                        <div>
                            <label >分类：</label>
                            <select
                            name="category"
                            id="category"
                            className="form-control infor" 
                            onChange={this.changeValue}
                            >
                                <option> -- 请选择 -- </option>
                                <option>数码电器 / 办公用品</option>
                                <option>食品饮料 / 厨房用品</option>
                                <option>汽车配件 / 汽车用品</option>
                                <option>笔墨纸砚 / 办公用品</option>
                                <option>服装鞋包 / 化妆洗护</option>
                                <option>钟表珠宝 / 计生医疗</option>
                                <option>运动户外 / 文娱艺术</option>
                                <option>家居家装 / 家用纺织</option>
                                <option>其他分类</option>
                            </select>
                        </div>

                        <div>
                            <label>入库时间：</label>
                            <input 
                            type="datetime-local"
                            name="intoDatetime"
                            id="intoDatetime"
                            className="form-control infor"
                            onChange={this.changeValue}
                            />
                        </div>

                        <div>
                            <label >数量：</label>
                            <input 
                            type="number"
                            name="quantity"
                            id="quantity"
                            //限制最小数量为1
                            min="10"
                            className="form-control infor" 
                            onChange={this.changeValue}
                            />
                        </div>

                        <div>
                            <label >单价：</label>
                            <input 
                            type="number"
                            name="price"
                            id="price"
                            //限制最小数量为1
                            min="1"
                            className="form-control infor" 
                            onChange={this.changeValue}
                            />
                        </div>

                         {/* 按钮 */}
                        <div className="formButton">

                            <button 
                                type="button" 
                                className="formButton"
                                onClick={this.resetForm}
                            >重置</button>
                            
                            {!this.state.goodsId ? 
                            
                                <button 
                                    type="button" 
                                    className="formButton"
                                    onClick={this.addUserInfo}
                                >提交</button>
                            :
                            
                                <button 
                                    type="button" 
                                    className="formButton"
                                    onClick={this.modifyUserInfo}
                                >修改</button>
                            }
                        </div>
                    </form>                
                </div>
            </div>
        )
    }
}

